<script setup lang="ts">
	import { getHotRecommandApi } from "@/services/home"
	import { SubTypeItem } from "@/types/hot.d.ts"
	import { onLoad } from "@dcloudio/uni-app"
	import { ref } from "vue"
	const hotmap = [{ type: '1', title: "特惠推荐", url: '/hot/preference' },
	{ type: '2', title: "爆款推荐", url: '/hot/inVogue' },
	{ type: '3', title: "一站买全", url: '/hot/oneStop' },
	{ type: '4', title: "新鲜好物", url: '/hot/new' },
	]
	const query = defineProps<{
		type : string
	}>()
	const bannerPicture = ref('')
	const currhot = hotmap.find((v) => v.type === query.type)
	const subTypes = ref<(SubTypeItem & { finish ?: Boolean })[]>([])
	uni.setNavigationBarTitle({
		title: currhot!.title
	})
	const activeIndex = ref(0)
	const getcommdata = async () => {
		const res = await getHotRecommandApi(currhot!.url, {
			page: import.meta.env.DEV ? 30 : 1,
			pageSize: 10
		})
		console.log(res)
		bannerPicture.value = res.result.bannerPicture;
		subTypes.value = res.result.subTypes
	}
	const xljz = async () => {
		const currsubtype = subTypes.value[activeIndex.value];
		if (currsubtype.goodsItems.page < currsubtype.goodsItems.pages) {
			currsubtype.goodsItems.page++
		} else {
			currsubtype.finish = true
			return uni.showToast({
				icon: 'none',
				title: "没有更多数据"
			})
		}
		const res = await getHotRecommandApi(currhot!.url, {
			subType: currsubtype.id,
			page: currsubtype.goodsItems.page,
			pageSize: currsubtype.goodsItems.pageSize
		})
		console.log(res)
		const newstype = res.result.subTypes[activeIndex.value];
		currsubtype.goodsItems.items.push(...newstype.goodsItems.items)

	}
	onLoad(() => {
		getcommdata()
	})
</script>
<template>
	<view class="viewport">
		<view class="cover">
			<image :src="bannerPicture" mode=""></image>

		</view>
		<view class="tabs">
			<text v-for="(item,index) in subTypes" :key="item.id" :class="{ active: index === activeIndex }"
				@tap="activeIndex = index">{{item.title}}</text>

		</view>
		<scroll-view scroll-y @scrolltolower="xljz" v-for="(item,index) in subTypes" :key="item.id"
			v-show="activeIndex === index" class="scroll-view">
			<view class="goods">
				<navigator :url="`/pages/goods/goods?id=${item1.id}`" class="navigator"
					v-for="item1 in item.goodsItems.items" :key="item1.id">
					<image class="thumb" :src="item1.picture">
					</image>
					<view class="name ellipsis">{{item1.name}}</view>
					<view class="price">
						<text class="symbol">￥</text>
						<text class="number">{{item1.price}}</text>

					</view>
				</navigator>

			</view>
			<view class="loading-text">
				{{item.finish? '没有更多数据':'正在加载...'}}
			</view>
		</scroll-view>
	</view>
</template>



<style>
	page {
		height: 100%;
		background: #f4f4f4;

	}

	.viewport {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 180rpx 0 0;
		position: relative;
	}

	.cover {
		width: 750rpx;
		height: 225rpx;
		border-radius: 0 0 40rpx 40rpx;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
	}

	.scroll-view {
		flex: 1
	}

	.tabs {
		display: flex;
		justify-content: space-evenly;
		height: 100rpx;
		line-height: 90rpx;
		margin: 0 20rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
		color: #333;
		background: #fff;
		position: relative;
		z-index: 9;
	}

	.tabs .text {
		margin: 0 20rpx;
		position: relative;
	}

	.active::after {
		content: '';
		width: 40rpx;
		height: 4rpx;
		transform: translate(-50%);
		background: #27ba9b;
		position: absolute;
		left: 50%;
		bottom: 24rpx;

	}

	.goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20rpx 20rpx;

	}

	.navigator {
		width: 345rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

	}

	.thumb {
		width: 305rpx;
		height: 305rpx;
	}

	.name {
		height: 88rpx;
		font-size: 26rpx;
	}

	.price {
		line-height: 1;
		color: #cf4444;
		font-size: 30rpx;
	}

	.symbol {
		font-size: 70%;

	}

	.decimal {
		font-size: 70%;
	}

	.loading-text {
		text-align: center;
		font-size: 28rpx;
		color: #666;
		padding: 20rpx 0 50rpx;
	}
</style>